<template>
  <!-- 1数学几何计算/1三维向量Vector3/ -->
  <div @click="clickObj" id="webgl" class="main"></div>
  <!-- <div id="tag"></div> -->
  <div
    id="tag"
    class="flame"
    style="
      position: absolute;
      width: 500px;
      height: 400px;
      color: #fff;
      z-index: 2;
      font-size: 16px;
      display: none;
    "
  >
    <div style="position: relative">
      <div style="position: absolute; left: 0px; top: 0px">
        <img
          src="./assets/信息背景.png"
          alt=""
          style="width: 400px; opacity: 1"
        />
      </div>
      <div
        id="granaryName"
        style="position: absolute; left: 25px; top: 40px; font-size: 16px"
      >
        {{ currentMessageData.granaryName }}
      </div>
      <div style="position: absolute; left: 290px; top: 25px">
        <img src="./assets/温度.png" alt="" style="width: 50px" />
      </div>
      <div id="temperature" style="position: absolute; left: 330px; top: 40px">
        {{ currentMessageData.temperature }}℃
      </div>
      <div id="grain" style="position: absolute; left: 170px; top: 50px">
        {{ currentMessageData.grain }}
      </div>
      <div
        style="
          position: absolute;
          left: 80px;
          top: 85px;
          font-size: 60px;
          color: #00ffff;
          vertical-align: middle;
        "
      >
        <img
          id="grainImg"
          :src="currentMessageData.grainImg"
          alt=""
          style="width: 60px"
        />
      </div>
      <div
        id="weight"
        style="
          position: absolute;
          left: 155px;
          top: 80px;
          font-size: 60px;
          color: #00ffff;
          vertical-align: middle;
        "
      >
        {{ currentMessageData.weight }} t
      </div>
      <div
        id="granaryHeight"
        style="
          position: absolute;
          left: 70px;
          top: 170px;
          padding: 8px 25px;
          border-radius: 30px;
          border: 1px solid #00ffff;
        "
      >
        仓高—{{ currentMessageData.granaryHeight }}m
      </div>
      <div
        id="grainHeight"
        style="position: absolute; left: 225px; top: 170px; padding: 8px 25px"
      >
        粮高— {{ currentMessageData.grainHeight }} m
      </div>
    </div>
  </div>
  <div style="display: none" class="fireTip">着火提示</div>
</template>
<script setup>
import { onMounted, ref } from "vue";
import { renderer, labelRenderer } from "./RenderLoop.js";
import { choose, intersects } from "./choose.js";
import messageData from "./messageData.js";
import { camera } from "./RendererCamera.js";
import { tag } from "./scene/tag.js";
window.onresize = function () {
  const width = window.innerWidth;
  const height = window.innerHeight;
  renderer.setSize(width, height);
  labelRenderer.setSize(width, height);
  camera.aspect = width / height;
  // 渲染器执行render方法的时候会读取相机对象的投影矩阵属性projectionMatrix
  // 但是不会每渲染一帧，就通过相机的属性计算投影矩阵(节约计算资源)
  // 如果相机的一些属性发生了变化，需要执行updateProjectionMatrix ()方法更新相机的投影矩阵
  camera.updateProjectionMatrix();
};
let currentMessageData = ref({});
const clickObj = (event) => {
  choose(event, label);
  if (intersects[0]) {
    currentMessageData.value = messageData[intersects[0].object.name];
  }
};
let label = null;
onMounted(() => {
  document.getElementById("webgl").appendChild(renderer.domElement);
  document.getElementById("webgl").appendChild(labelRenderer.domElement);
  label = tag("flame");
});
</script>
<style scoped>
.fireTip {
  box-shadow: 0 0 2px #00ffff inset;
  background: linear-gradient(#00ffff, #00ffff) left top,
    linear-gradient(#00ffff, #00ffff) left top,
    linear-gradient(#00ffff, #00ffff) right bottom,
    linear-gradient(#00ffff, #00ffff) right bottom;
  background-repeat: no-repeat;
  background-size: 1px 6px, 6px 1px;
  background-color: rgba(0, 0, 0, 0.4);
  color: #ffffff;
  font-size: 16px;
  padding: 4px 10px;
}
</style>